/**
 * Created by Allan on 2017/09/20.
 */
import React, { Component } from "react";
import createG2 from "g2-react";
import "./index.less"

export default class LineChart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      width: document.body.clientWidth,
      height: 130 * 2,
      plotCfg: {
        margin: [80, 60, 60, 50]
      },
      xAxisFontSize: 40,
    };
  }

  componentDidMount() {
    // if (document.body.clientWidth > 750) {
    //   this.setState({
    //     xAxisFontSize: 50
    //   });
    // }
  }

  render() {
    const Line = createG2(chart => {

      // 点击画布显示当前坐标信息
      chart.on('plotclick',function(ev){
        var point = {
          x: ev.x,
          y: ev.y
        };
        chart.showTooltip(point); // 接收的是画布坐标上的点
      });
      
      chart.axis("xAxisData", {
        title: null,
        line: {
          stroke: "#dcdcdc" // 设置线的颜色
        },
        labels: {
            custom: true,
            renderer: function(value){
                return '<div class="bottom-axis-text">' + value + '</div>';
            }
				},
      });

      chart.axis("yAxisData", {
        title: null,
        line: null,
        labels: null,
        grid: null,
        tickLine: null
      });

      chart.tooltip(true, {
        custom: true, // 使用自定义的 tooltip
        offset: 40,
        crosshairs: true, // 是否显示 tooltip 辅助线
        title: null,
        map: { // 用于指定 tooltip 内显示内容同原始数据字段的映射关系
          title: '人数', // 为数据字段名时则显示该字段名对应的数值，常量则显示常量复制代码
          name: '人数', // 为数据字段名时则显示该字段名对应的数值，常量则显示常量
          value: '人数' // 为数据字段名时则显示该字段名对应的数值
        },
      });

      chart.source(this.props.chartData, {
        xAxisData: {
          type: 'cat',
          range: [0, 1],
        }
      })
      
      chart.legend(false);

      chart
        .areaStack()
        .position("xAxisData*yAxisData")
        .color("#D6EAFE")
        .label("yAxisData", {
          offset: 45,
          label: {
            fill: "#3296FA",
            fontSize: this.state.xAxisFontSize,
          }
        })
        .size(2);

			chart.line().position('xAxisData*yAxisData').color('#3296FA').size(5);
      chart.point().position('xAxisData*yAxisData').color('#3296FA').size(10);
      chart.animate(false);
      chart.render();
    });

    return (
      <Line
        data={this.props.chartData ? this.props.chartData : []}
        width={this.state.width}
        height={this.state.height}
        plotCfg={this.state.plotCfg}
        forceFit={true}
      />
    );
  }
}
